<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animation Playground</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <main>
      <header class="nav">
        <a href="/">
          <img src="logo.svg" alt="logo" />
        </a>
        <a href="https://jsmastery.com/all-courses" target="_blank"
          >GSAP Course</a
        >
      </header>

      <section class="container">
        <h1>The Ultimate GSAP Course Workshop</h1>

        <ul>
          <li>
            <a href="pages/01a_your-first-animation/index.html">
              <img src="cover1.png" alt="animation-cover" />

              <div>
                <h3>Your First Animation</h3>
                <p>Learn how to create your first animation with GSAP</p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/01b_challenge/index.html">
              <img src="cover2.png" alt="animation-cover" />

              <div>
                <h3>Basic Challenge</h3>
                <p>Practice your skills by creating a pulsing glow animation</p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/02a_understanding-properties/index.html">
              <img src="cover3.png" alt="animation-cover" />

              <div>
                <h3>Understanding Properties</h3>
                <p>
                  Learn how GSAP interprets and animates different types of
                  properties to create visually rich motion.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/02b_understanding-methods/index.html">
              <img src="cover4.png" alt="animation-cover" />

              <div>
                <h3>Understanding Methods</h3>
                <p>
                  Learn how to control GSAP animations using built-in methods to
                  create complex motion sequences.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/03a_power-easing/index.html">
              <img src="cover5.png" alt="animation-cover" />

              <div>
                <h3>Power Easing</h3>
                <p>
                  Learn how Power Easing in GSAP offers progressively stronger
                  acceleration and deceleration for snappier or smoother motion
                  control.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/04a_sine-easing/index.html">
              <img src="cover6.png" alt="animation-cover" />

              <div>
                <h3>Sine Easing</h3>
                <p>
                  Learn how Sine Easing in GSAP creates smooth, natural motion
                  by mimicking the curve of a sine wave
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/05a_back-easing/index.html">
              <img src="cover7.png" alt="animation-cover" />

              <div>
                <h3>Back Easing</h3>
                <p>
                  Learn how Back Easing in GSAP creates motion that briefly
                  overshoots before settling, adding a dynamic, elastic feel to
                  animations.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/06a_bounce-easing/index.html">
              <img src="cover8.png" alt="animation-cover" />

              <div>
                <h3>Bounce Easing</h3>
                <p>
                  Learn how Bounce Easing in GSAP simulates realistic bouncing
                  effects by mimicking gravity and collision dynamics.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/07a_elastic-easing/index.html">
              <img src="cover9.png" alt="animation-cover" />

              <div>
                <h3>Elastic Easing</h3>
                <p>
                  Learn how Elastic Easing in GSAP produces spring-like motion
                  with dramatic overshoot and recoil for high-energy animations.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/08a_expo-easing/index.html">
              <img src="cover10.png" alt="animation-cover" />

              <div>
                <h3>Expo Easing</h3>
                <p>
                  Learn how Expo Easing in GSAP creates dramatic animations that
                  accelerate or decelerate exponentially for a powerful impact.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/09a_apple-dock/index.html">
              <img src="cover11.png" alt="animation-cover" />

              <div>
                <h3>Apple Dock</h3>
                <p>
                  Learn how to recreate Apple Dock–style animations in GSAP
                  using a mix of easing functions for smooth, responsive, and
                  playful motion.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/10a_learn-to/index.html">
              <img src="cover12.png" alt="animation-cover" />

              <div>
                <h3>Learn Gsap To</h3>
                <p>
                  Learn how <code>gsap.to()</code> lets you animate any property
                  to a desired value with full control over timing, easing, and
                  callbacks.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/10b_challenge-to/index.html">
              <img src="cover13.png" alt="animation-cover" />

              <div>
                <h3>Gsap To Challenge</h3>
                <p>
                  Put your skills to the test by using <code>gsap.to()</code> to
                  create a multi-property, interactive animation with custom
                  easing and sequencing.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/11a_learn-from/index.html">
              <img src="cover14.png" alt="animation-cover" />

              <div>
                <h3>Learn Gsap From</h3>
                <p>
                  Learn how <code>gsap.from()</code> animates elements from a
                  starting state to their current state, ideal for entrance
                  animations.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/11b_challenge-from/index.html">
              <img src="cover15.png" alt="animation-cover" />

              <div>
                <h3>Gsap From Challenge</h3>
                <p>
                  Put your skills to the test by creating engaging entrance
                  animations using <code>gsap.from()</code> to reveal elements
                  with flair.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/12a_learn-fromto/index.html">
              <img src="cover16.png" alt="animation-cover" />

              <div>
                <h3>Learn Gsap fromTo</h3>
                <p>
                  Learn how <code>gsap.fromTo()</code> gives you precise control
                  by defining both the start and end states of an animation
                  explicitly.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/12b_challenge-fromto/index.html">
              <img src="cover17.png" alt="animation-cover" />

              <div>
                <h3>Gsap fromTo Challenge</h3>
                <p>
                  Put your skills to the test by building a precise animation
                  using <code>gsap.fromTo()</code>, defining both start and end
                  states.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/13a_learn-set/index.html">
              <img src="cover18.png" alt="animation-cover" />

              <div>
                <h3>Learn Gsap Set</h3>
                <p>
                  Learn how <code>gsap.set()</code> instantly applies property
                  values without animation, perfect for setup, state resets, or
                  quick style tweaks.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/13b_challenge-set/index.html">
              <img src="cover19.png" alt="animation-cover" />

              <div>
                <h3>Gsap Set Challenge</h3>
                <p>
                  Put your skills to the test by using
                  <code>gsap.set()</code> to initialize animation states, and
                  control visibility.
                </p>
              </div>
            </a>
          </li>

          <li>
            <a href="pages/14a_learn-timeline/index.html">
              <img src="cover20.png" alt="animation-cover" />

              <div>
                <h3>Gsap Timeline</h3>
                <p>
                  Learn how <code>gsap.timeline()</code> lets you sequence
                  multiple animations with precise control over timing, overlap,
                  and orchestration.
                </p>
              </div>
            </a>
          </li>
        </ul>
      </section>
    </main>
  </body>
</html>
